這篇分享如何使用lottie動畫的參數調整。

使用Lottie動畫

• 記得上次使用的lottie js檔

var animation = bodymovin.loadAnimation({
  container: document.getElementById('lottie'), // Required
  path: 'data.json', // Required
  renderer: 'svg/canvas/html', // Required
  loop: true, // Optional
  autoplay: true, // Optional
  name: "Hello World", // Name for future reference. Optional.
})

簡單說明一下內容裡面都是什麼：

container：選擇要用來渲染動畫的標籤，括號裡放標籤的id
path:要使用的json檔路徑
loop:決定動畫是否重複播放
autoplay:決定動畫是否自動播放
name:這個動畫的名稱

接著我們可以搭配各種事件來使用lottie動畫，例如：按鈕、scroll等等，下面簡單搭配按鈕來使用：

• HTML button
  在HTML寫好button標籤，接著先將onclick事件放進去，將函式取個名字
  onclick="lottieStart()
  預設等一下會在js寫好lottieStart()這個函式，給button使用

<button id="lottie-start" onclick="lottieStart()">Lottie Start</button>

• JS函式
  這裡示範anim.play()，去控制動畫開始播放，先寫上面onClick所需的函示，裡面再放上anim(動畫名稱）.play（）即可透過點擊按鈕達到播放動畫。

function lottieStart(){
  lottie.play();
};

總結

官方github也有教學更多用法，以下附上網址。
lottie github